<template>
    <div class="message_warp" v-loading="over">
        <div class="message_header">
            <i class="el-icon-arrow-left" @click="handleBack"></i>
            <p>在线客服</p>
            <p></p>
        </div>
        <div class="content">
            <div class="message-list" ref="message-list" @scroll="onScroll">
                <div class="more" v-if="!isCompleted">
                    <el-button
                            type="text"
                            @click="$store.dispatch('getMessageList', 'C2C' + service_id + 'b')"
                    >查看更多
                    </el-button>
                </div>
                <div class="no-more" v-else>没有更多了</div>
                <message-item :message-detail="detail" v-for="message in handleMessageList" :key="message.ID"
                              :message="message"/>
            </div>
            <div v-show="isShowScrollButtomTips" class="newMessageTips" @click="scrollMessageListToButtom">回到最新位置</div>
        </div>
        <div>
            <message-send-box @on-show-time="handleUpdataTime" :service_id="service_id"/>
        </div>
    </div>
</template>

<script>
    import http from '../../libs/http'
    import {mapState} from 'vuex'
    import {forEach} from "../../libs/tool";
    import {getDay, getFullDate, getTime, isToday} from "../../libs/time";
    import MessageSendBox from '../../components/send-box'
    import MessageItem from "../../components/message-item";
    // import ConversationProfile from "../../../../demi/src/views/IM/conversation/conversation-profile";

    export default {
        name: 'index',
        components: {
            MessageSendBox,
            MessageItem,
            // ConversationProfile
        },
        data() {
            return {
                service_id: "",
                id: "",
                isShowScrollButtomTips: false,
                preScrollHeight: 0,
                timeTamp: 0,
                lastTime: 0,
                detail: {},
                isOver:true
                // over: true
            }
        },

        mounted() {
            /*if(this.isSDKReady){
                this.tim.setMessageRead({
                    conversationID: this.handleList.conversationID,
                    lastMessageTime: this.handleList.lastMessage.lastTime
                })
            }*/
            if (sessionStorage.getItem('service_id')) {
                this.service_id = sessionStorage.getItem('service_id');
                let data = {
                    type: 4,
                    account: sessionStorage.getItem('service_id') + 'b',
                };
                this.apiPost('/converse/create', data).then((res) => {
                    if (res) {
                        // this.over = false;
                        this.detail = res;
                    }
                })
            }
        },
        created() {
            this.getParams()
            if (this.isSDKReady) {
                this.$store
                    .dispatch('checkoutConversation', `C2C${this.service_id + 'b'}`)
                    .then(() => {
                        console.log('aaaaa')
                    });
            }
        },
        methods: {
            getParams() {
                // 取到路由带过来的参数
                this.id = this.$route.query.id
            },
            handleBack() {
                if (this.isSDKReady) {
                    this.tim.setMessageRead({
                        conversationID: this.handleList.conversationID,
                        lastMessageTime: this.handleList.lastMessage.lastTime
                    })
                }
                if (this.id) {
                    this.$router.push({
                        name: 'shop_info',
                        query: {id: this.id, task_order_id: sessionStorage.getItem('task_order_id')}
                    })
                } else {
                    this.$router.push({
                        name: 'index',
                        query: {id: this.id, task_order_id: sessionStorage.getItem('task_order_id')}
                    })
                }

            },
            onScroll({target: {scrollTop}}) {
                let messageListNode = this.$refs['message-list']
                if (!messageListNode) {
                    return
                }
                console.log(messageListNode.clientHeight)
                if (this.preScrollHeight - messageListNode.clientHeight - scrollTop < 20) {
                    this.isShowScrollButtomTips = false
                }
            },
            scrollMessageListToButtom() {
                this.$nextTick(() => {
                    let messageListNode = this.$refs['message-list']
                    if (!messageListNode) {
                        return
                    }
                    messageListNode.scrollTop = messageListNode.scrollHeight
                    this.preScrollHeight = messageListNode.scrollHeight
                    this.isShowScrollButtomTips = false
                })
            },
            handleUpdataTime(data) {
                this.lastTime = data;
                console.log(this.lastTime)
            },

        },
        computed: {
            over() {
                if (this.isSDKReady) {
                    this.$store
                        .dispatch('checkoutConversation', `C2C${this.service_id + 'b'}`)
                        .then(() => {
                            this.isOver = false
                        });
                    return this.isOver
                }
            },

            ...mapState({
                handleList(state) {
                    console.log(state.conversation.conversationList)
                    let message = null;
                    for (let i in state.conversation.conversationList) {
                        if (state.conversation.conversationList[i].conversationID === ("C2C" + this.service_id + 'b')) {
                            message = state.conversation.conversationList[i];
                        }
                    }
                    return message
                },
                handleMessageList(state) {
                    forEach(state.conversation.currentMessageList, item => {
                        if (typeof item.time != 'string') {
                            if (this.lastTime > 0) {
                                if (this.lastTime - this.timeTamp > 300) {
                                    item.time = getTime((new Date(item.time * 1000)));
                                } else {
                                    item.time = ""
                                }
                                this.lastTime = 0;
                            } else {
                                if ((Math.abs(item.time - this.timeTamp) > 300) || (item.time - this.timeTamp == 0)) {
                                    this.timeTamp = item.time;
                                    if (isToday(new Date(item.time * 1000))) {
                                        item.time = getTime((new Date(item.time * 1000)));
                                    } else {
                                        if ((new Date(item.time * 1000).getFullYear() == new Date().getFullYear()) && (new Date(item.time * 1000).getMonth() == new Date().getMonth())) {
                                            if (parseInt(new Date().getDate()) - parseInt(new Date(item.time * 1000).getDate()) == 1) {
                                                item.time = '昨天' + ' ' + getTime((new Date(item.time * 1000)));
                                            } else if ((parseInt(new Date().getDate()) - parseInt(new Date(item.time * 1000).getDate()) > 1) && (parseInt(new Date().getDate()) - parseInt(new Date(item.time * 1000).getDate()) <= 7)) {
                                                item.time = getDay(new Date(item.time * 1000)) + getTime((new Date(item.time * 1000)))
                                            }
                                        } else {
                                            item.time = getFullDate(new Date(item.time * 1000))
                                        }
                                    }
                                } else {
                                    this.timeTamp = item.time;
                                    item.time = ""
                                }
                            }
                        }
                    });
                    // }
                    return state.conversation.currentMessageList
                },
                isLogin: state => state.user.isLogin,
                isCompleted: state => state.conversation.isCompleted,
                isSDKReady: state => state.user.isSDKReady,
            })
        },
        mixins: [http]
    }
</script>

<style lang="stylus">
    .message_warp
        width 100%
        height 100%
        overflow-x hidden

        .message_header
            position fixed
            top 0
            left 0
            z-index 2
            width 100%
            height: 44px;
            font-size: 16px;
            color #454545;
            display flex;
            justify-content space-between
            text-align: center;
            line-height: 44px;
            background-color: #ffffff;
            border-bottom 1px solid #F7F7F7

            i, p
                align-self center

            p
                margin-right 20px

            i
                padding-left 20px

        .content
            margin-top 44px
            margin-bottom 80px
            display: flex;
            flex 1
            flex-direction: column;
            height: 100%;
            overflow: hidden;
            position: relative;

            .message-list
                width: 100%;
                box-sizing: border-box;
                overflow-y: scroll;
                padding: 0 10px;

                .more
                    display: flex;
                    justify-content: center;
                    font-size: 12px;

                .no-more
                    display: flex;
                    justify-content: center;
                    color: #a5b5c1;
                    font-size: 12px;
                    padding: 10px 5px;

            .newMessageTips
                position: absolute
                cursor: pointer;
                padding: 5px;
                width: 120px;
                margin: auto;
                left: 0;
                right: 0;
                bottom: 5px;
                font-size: 12px;
                text-align: center;
                border-radius: 10px;
                border: 1px solid #e9eaec
                background-color: #fff
                color: #2d8cf0

        .message_send
            position fixed
            left 0
            bottom 0
            width 100%
            z-index 2
            background: #fff;
            display flex
            padding 0 15px
            box-sizing border-box
            justify-content space-between
            border-top 1px solid #e6e6e6

            .el-textarea
                width 60%
                align-self center

                .el-textarea__inner
                    border none
                    padding 0
                    font-size 14px

            span
                align-self center

                img
                    width 30px


            .el-icon-folder-opened
                font-size 28px
                align-self center

            .message_send_button
                font-size 12px
                height 28px
                padding 0 8px
                color #FFFFFF
                align-self center
                line-height 28px
                border-radius: 5px;
                background: rgba(59, 199, 255, 1);

    .el-popover
        padding 0

    .emojis {
        padding: 12px;
        height: 75px;
        box-sizing: border-box;
        display: flex;
        flex-direction: row;
        flex-wrap: wrap;
        overflow-y: scroll;
    }

    .emojis::-webkit-scrollbar {
        width: 5px;
    }

    .emoji {
        height: 30px;
        width: 30px;
        box-sizing: border-box;
    }
</style>